<template>
  <div class="login_account">
    <div class="account">
      <input type="search" placeholder="手机号/邮箱/用户名" v-model="name"/>
    </div>
    <div class="pwd">
      <input type="password" placeholder="密码" v-model="pwd" ref="pass"/>
      <span class="iconfont icon-bukejian" @click="show($event)"></span>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      name:"",
      pwd:"",
    }
  },
  methods: {
    show(e){
      // console.log(e.target);
      if(e.target.classList.contains('icon-bukejian')){
        //密码可见
        e.target.classList.remove('icon-bukejian');
        e.target.classList.add('icon-kejian');    
        this.$refs.pass.type = 'text';    
      }
      else{
        //密码不可见
        e.target.classList.remove('icon-kejian');
        e.target.classList.add('icon-bukejian'); 
        this.$refs.pass.type = 'password';
      }

    },
  },
}
</script>

<style scoped>
.login_account {
  height: 1.3rem;
  /* background-color: aqua; */
  padding: 0 0.15rem;
}
.login_account .account {
  height: 0.65rem;
  border-bottom: 1px solid rgb(235, 235, 235);
  line-height: 0.65rem;
}
.login_account .pwd {
  height: 0.65rem;
  border-bottom: 1px solid rgb(235, 235, 235);
  line-height: 0.65rem;
  position: relative;
}
.login_account input {
  width: 100%;
  height: 0.3rem;
  font-size: 0.18rem;
}
.icon-bukejian,
.icon-kejian {
  font-size: 0.2rem;
  position: absolute;
  right: 0.1rem;
}
</style>